<template>

    <div>
        <!-- 头部导航 -->
        <template>
            <div id="Point" style="height:150px;background-color:#f2f2f2;">
            <!-- 顶部 -->
                <el-header id="xd" style="background-color:#f2f2f2; height:100px;">
                    <!-- 根据参数切换请求的路由 -->
                    <div style="width:80%;margin:auto;">
                        <p style="margin:0;font-size:26px; padding-top:20px;" id="biaoqian">个人中心</p>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/index/true/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                        <el-breadcrumb-item>我的订单</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </el-header>
            </div>
        </template>
        <!-- 下面的选项 -->
        <el-tabs type="border-card" style="width:80%;margin:auto;margin-top:-40px;">
            <el-tab-pane label="我的订单">
                我的行程
            </el-tab-pane>
            <el-tab-pane label="常用联系人">消息中心</el-tab-pane>
            <el-tab-pane label="我的收藏">角色管理</el-tab-pane>
            <el-tab-pane label="个人设置">定时任务补偿</el-tab-pane>
            <el-tab-pane label="充值">定时任务补偿</el-tab-pane>
            <el-tab-pane label="未支付订单">定时任务补偿</el-tab-pane>
            <el-tab-pane label="足迹图表">定时任务补偿</el-tab-pane>
            <el-tab-pane label="浏览足迹">定时任务补偿</el-tab-pane>
            <el-tab-pane label="抬头管理">定时任务补偿</el-tab-pane>
        
        </el-tabs>




    </div>

</template>

<script>
export default {
    data() {
        return {

        }
    }
}
</script>


<style>

    /* 点击后标签字体的颜色 */
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
        color:#00050a !important;
    }
    /* 鼠标移动到标签上的颜色 */
    .is-top:hover{
        color:#323941 !important;
    }
</style>